<template>
  <div>
    <div style="text-align: center">
      <el-image style="width: 1600px; height: 600px" :src="url" :fit="fit" />
    </div>
    <div class="tittle_all">景点详情</div>
    <div style="width: 50%; height: 500px; margin: 0 auto">
      <div class="banner_title">
        <div class="aaa">环境优美</div>
        <div class="aaa">空气清新</div>
        <div class="aaa">避暑圣地</div>
      </div>
      <div class="banner_main">
        青城山前山是青城山风景名胜区的主体部分，约15平方千米，景色优美，文物古迹众多。以下是为您总结的青城山前山的介绍：12
        建福宫。进入青城前山山门后向左看，所遇见的第一座道观便是建福宫了。建福宫建于唐代开国年间，如今仅存清代重修的两院三殿。其中最引人注目的，便是殿内柱子上的394字对联了。34
        天师洞。天师洞是青城山最负盛名的道观之一，建于隋朝大业年间，如今已有1500年历史。天师洞内供奉着张道陵及其三十代孙“虚靖天师”的塑像。
        上清宫。上清宫始建于晋代，规模宏大，可以提供对外住宿，普通间双人房80元，性价比还是挺高的。5
        老君阁。老君阁是全山最高处，登临其上可俯瞰青城全山景色壮丽。1
        朝阳洞。朝阳洞是一处清幽的道教洞窟，内部供奉着道教神像，洞外环境幽静，是游客们休闲游览的好去处。
        天然图画坊。天然图画坊是一座十角重檐式的亭子，建于清朝的光绪年间。周围层峦叠翠，绿荫清幽，仿佛置身画中，因此得名“天然图画坊”。4
        青城山前山的游览路线可以选择左上右下或右上左下的不同路线，左边路线阶梯多、更耗体力，但游客少、更清净；右边路线地势较缓、相对轻松一些，是游客多的索道路线。此外，青城山前山还有索道服务，索道往返60元/人，单程35元/人，索道下站只到了半山腰，剩下的要自己爬上去。
      </div>
    </div>
    <div class="tittle_all">特点推荐</div>
    <div class="banner_img">
      <div v-for="item in list" :key="item">
        <el-image style="width: 200px; height: 250px" :src="item.url" />
      </div>
    </div>
  </div>
</template>
<script lang="js" setup>
  import {ref, reactive } from 'vue'
    const url = ref(require('../../../assets/订单/前山2.png'))
    const list = reactive([
  {
    url: require('../../../assets/订单/老君阁.png'),
  },
  {
    url: require('../../../assets/订单/风景.png'),
  },
  {
    url: require('../../../assets/订单/道家.png'),
  },
  {
    url: require('../../../assets/订单/文化.png'),
  },
  {
    url: require('../../../assets/订单/后山.png'),
  },
  {
    url: require('../../../assets/订单/前山.png'),
  },
]
)
</script>
<style lang="less" scoped>
.banner_title {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  .aaa {
    width: 100px;
    height: 50px;
    // border: 2px solid green;
    background-color: #38e328;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 20px;
  }
}
.banner_main {
  line-height: 2;
  font-size: 18px;
  text-indent: 2em;
}
.banner_img {
  background: #30bb23;
  width: 600px;
  margin: 0 auto;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
</style>
